export default {
  data() {
    // 定义校验规则
    // 邮箱校验
    var checkEmail = (rule, value, callback) => {
      if (/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value) === false) {
        return callback(new Error('邮箱验证失败'))
      }
      callback()
    }
    // 手机校验
    var checkMobile = (rule, value, callback) => {
      if (/^[1][3,4,5,7,8][0-9]{9}$/.test(value) === false) {
        return callback(new Error('手机验证失败'))
      }
      callback()
    }

    return {
      queryinfo: {
        query: '', // 用户输入的搜索
        pagenum: 1, // 页
        pagesize: 2 // 条
      },
      userList: [],
      total: 0, // 总条数
      adddialogVisible: false, // 控制添加对话框的显示和隐藏
      //   添加
      addruleForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      //   修改
      EditdialogVisible: false,
      EditruleForm: {
        id: '',
        username: '',
        email: '',
        mobile: ''
      },
      Editrules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' },
          { min: 6, max: 22, message: '长度在 6 到 22 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 到 11 个字符', trigger: 'blur' }
        ]
      },
      addrules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' },
          { min: 6, max: 22, message: '长度在 6 到 22 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 到 11 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    //  显示用户列表信息
    async getUserList() {
      const { data: res } = await this.$http.get('users', { params: this.queryinfo })
      if (res.meta.status !== 200) return this.$message.error('获取用户信息失败')
      // console.log(res.data.users)
      this.userList = res.data.users
      this.total = res.data.total
    },
    // 监听pagesize的变化
    handleSizeChange(newsize) {
      // 把最新的pagesize给queryinfo
      this.queryinfo.pagesize = newsize
      this.getUserList()
    },
    // 监听页码的变化
    handleCurrentChange(newnum) {
      this.queryinfo.pagenum = newnum
      this.getUserList()
    },
    // 修改状态功能
    async getSdateList(newsdate, id) {
      // console.log(newsdate)
      // console.log(id)
      const { data: res } = await this.$http.put(`users/${id}/state/${newsdate}`)
      // const { data: res } = await this.$http.put('users/' + id + '/state/' + newsdate)
      if (res.meta.status !== 200) return this.$message.error('修改状态失败')
      this.$message.success('修改状态成功')
    },
    // 添加用户功能
    // 重置表单
    addDialogClosed() {
      this.$refs.addruleFormRef.resetFields()
    },
    // 添加用户功能
    addUser() {
      // 如果验证通过才能进入axios请求
      this.$refs.addruleFormRef.validate(async vali => {
        if (!vali) return
        const { data: res } = await this.$http.post('users', this.addruleForm)
        if (res.meta.status !== 201) return this.$message.error('添加失败')
        this.$message.success('添加成功')
        //   刷新列表
        this.getUserList()
        //   隐藏弹出框
        this.adddialogVisible = false
      })
    },
    // 修改用户功能
    // 重置表单
    EditdialogVisibleClose() {
      this.$refs.EditruleFormRef.resetFields()
    },
    // 显示修改数据
    async ShowEdit(scope) {
      //   console.log(scope.row.id)
      const { data: res } = await this.$http.get('users/' + scope.row.id)
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      //   console.log(res.data)
      this.EditruleForm.id = res.data.id
      this.EditruleForm.username = res.data.username
      this.EditruleForm.email = res.data.email
      this.EditruleForm.mobile = res.data.mobile
      this.EditdialogVisible = true
    },
    // 修改功能实现
    EditUser() {
      this.$refs.EditruleFormRef.validate(async vali => {
        if (!vali) return
        const { data: res } = await this.$http.put(
          'users/' + this.EditruleForm.id,
          this.EditruleForm
        )
        if (res.meta.status !== 200) return this.$message.error('修改失败')
        this.$message.success('修改成功')
        this.getUserList()
        this.EditdialogVisible = false
      })
    },
    // 删除用户信息
    async remove(scope) {
      //   console.log(scope.row.id)
      const cf = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (cf !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
      //   admin账户无法被删除
      const { data: res } = await this.$http.delete('users/' + scope.row.id)
      if (res.meta.status !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.getUserList()
    }
  }
}
